<template>
  <div class="EnergyAnalysis-wrapper">
    <xyEnergyhead>
      <header>
        <h1 class="header-title">
          <svg-icon icon-class="echarts-icon" class="energy-icon-style"></svg-icon
          >能耗分析系统
        </h1>
        <div class="header-tip">全面监控与分析各类能耗数据,助力节能减排</div>
        <div class="header-item">
          <div>
            <div><svg-icon icon-class="plug"></svg-icon>累计电量</div>
            <div class="header-item-detail"><span>1000</span><span>kWh</span></div>
          </div>
          <div>
            <div><svg-icon icon-class="dashboard-3"></svg-icon>累计电费</div>
            <div class="header-item-detail"><span>1000</span><span>元</span></div>
          </div>
          <div>
            <div><svg-icon icon-class="fire"></svg-icon>累计加热时长</div>
            <div class="header-item-detail"><span>1000</span><span>元</span>小时</div>
          </div>
          <div>
            <div><svg-icon icon-class="tree"></svg-icon>分组能耗</div>
            <div class="header-item-detail"><span>1000</span><span>元</span></div>
          </div>
          <div>
            <div><svg-icon icon-class="dataCenter"></svg-icon>峰谷平电量</div>
            <div class="header-item-detail"><span>1000</span><span>元</span>小时</div>
          </div>
        </div>
      </header>
    </xyEnergyhead>
    <div class="EnergyAnalysis-tab">
      <div
        :class="typeShow ? 'EnergyAnalysis-tab-charts' : 'EnergyAnalysis-tab-table'"
        @click="typeShow = true"
      >
        <svg-icon icon-class="EnergyConsumption"></svg-icon>图标视图
      </div>
      <div
        :class="!typeShow ? 'EnergyAnalysis-tab-charts' : 'EnergyAnalysis-tab-table'"
        @click="typeShow = false"
      >
        <svg-icon icon-class="table"></svg-icon>表格视图
      </div>
    </div>
    <div class="EnergyAnalysis-tab-title">
      <svg-icon icon-class="dashboard-4"></svg-icon>电量与电费分析
    </div>
    <EnergyAnalysis :typeShow="typeShow"></EnergyAnalysis>
    <ElectricitybillAnalysis :typeShow="typeShow"></ElectricitybillAnalysis>
    <div class="EnergyAnalysis-tab-title" style="margin-top: 40px">
      <svg-icon icon-class="fire"></svg-icon>设备运行与能耗分析
    </div>
    <HeatingDurationAnalysis :typeShow="typeShow"></HeatingDurationAnalysis>
    <GroupedEnergyConsumptionAnalysis
      :typeShow="typeShow"
    ></GroupedEnergyConsumptionAnalysis>
    <PeakAnalysis :typeShow="typeShow"></PeakAnalysis>
  </div>
</template>
<script>
import xyEnergyhead from "../components/xy-energy-head.vue";
import EnergyAnalysis from "./component/EnergyAnalysis.vue";
import ElectricitybillAnalysis from "./component/ElectricitybillAnalysis.vue";
import HeatingDurationAnalysis from "./component/HeatingDurationAnalysis.vue";
import GroupedEnergyConsumptionAnalysis from "./component/GroupedEnergyConsumptionAnalysis.vue";
import PeakAnalysis from "./component/PeakAnalysis.vue";
export default {
  components: {
    xyEnergyhead,
    EnergyAnalysis, // 电量统计
    ElectricitybillAnalysis, //电费统计
    HeatingDurationAnalysis, // 加热时长统计
    GroupedEnergyConsumptionAnalysis, // 分组能耗统计
    PeakAnalysis, // 峰谷分析
  },
  data() {
    return {
      typeShow: true,
    };
  },
  methods: {},
};
</script>
<style scoped lang="scss">
.EnergyAnalysis-wrapper {
  background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
  color: #1e293b;
}
header {
  padding: 20px 30px;
  h1 {
    width: 300px;
    font-size: 2.2rem;
    line-height: 3.6rem;
    margin: 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    background: linear-gradient(45deg, #0066ff, #7b2cbf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
    .energy-icon-style {
      color: #4f46e5;
      font-size: 2.2rem; /* 可根据需要调整大小 */
      margin-right: 10px;
    }
  }
  .header-tip {
    font-size: 1.1rem;
    margin: 1rem 0;
    color: #64748b;
  }
  .header-item {
    padding: 25px 20px;
    display: flex;
    justify-content: space-around;
    background: linear-gradient(
      135deg,
      rgba(0, 102, 255, 0.08),
      rgba(123, 44, 191, 0.08)
    );
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 16px;
    color: #64748b;
    font-size: 0.9rem;
    text-align: center;
    .svg-icon {
      margin-right: 5px;
    }
    .header-item-detail {
      font-size: 1.4rem;
      font-weight: 700;
      color: #0066ff;
      margin: 15px 0 0 0;
    }
  }
}
.EnergyAnalysis-tab {
  display: flex;
  justify-content: flex-end;
  padding: 20px 20px 10px 20px;
  .EnergyAnalysis-tab-table,
  .EnergyAnalysis-tab-charts {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    .svg-icon {
      margin-right: 5px;
      font-size: 12px;
    }
  }
  .EnergyAnalysis-tab-charts {
    background-color: #0066ff;
    color: #ffffff;
    border: 1px solid #0066ff;
  }
  .EnergyAnalysis-tab-table {
    background-color: #0066ff;
    color: #1e293b;
    border: 1px solid rgba(0, 102, 255, 0.15);
    background: rgba(0, 102, 255, 0.08);
    margin: 0 15px;
  }
}
.EnergyAnalysis-tab-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0066ff;
  margin: 0 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid rgba(0, 102, 255, 0.1);
}
</style>
